<!--站房报警配置-->
<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item>
          <el-select
            v-model="queryParams.stationId"
            filterable
            remote
            reserve-keyword
            placeholder="站房名称"
            clearable
            remote-show-suffix
            :remote-method="queryStationList"
            :loading="loading"
            style="width: 240px"
          >
            <el-option v-for="item in stations" :key="item.stationId" :label="item.name" :value="item.stationId" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.channels"
              filterable
              remote
              clearable
              reserve-keyword
              placeholder="报警通道"
              remote-show-suffix
              :loading="loading"
              style="width: 240px"
            >
              <el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>

        <el-button type="primary" icon="Plus" @click="handleAdd" style="float:right">新建配置</el-button>
      </el-form>
    </div>

    <div class="tabel-container myTable">
      <vxe-table ref="tableRef" :data="tableData" v-loading="loading">
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="stationName" title="站房名称" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="channels" title="报警通道" sortable>
          <template #default="{ row }">
            {{getChannels(row.channels)}}
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="ruleName" title="报警名称" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="" title="报警类型" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="userGroupVos" title="用户组" sortable>
          <template #default="{ row }">
            <span v-for="group in row.userGroupVos">{{group.groupName}},</span>
          </template>
        </vxe-table-column>
        <vxe-column field="id" title="操作" width="260" fixed="right" show-overflow>
          <template #default="{ row }">
            <el-button link type="primary" @click="handleInfo(row)">详情</el-button>
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDel(row)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script lang="ts">
import { confList, confDel } from '@/api/operation/alarmRule/index';
import { listStation } from '@/api/station/index';

import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  computed: {
    times: {
      get() {
        return [this.queryParams.timeFrom, this.queryParams.timeTo];
      },
      set(value) {
        this.queryParams.timeFrom = value[0];
        this.queryParams.timeTo = value[1];
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      stations: [],

      total: 1,
      queryParams: {
        stationId: '',
        channels: '',
        pageNum: 1,
        pageSize: 20
      },
      enabled: [
        { label: '停用', value: '0' },
        { label: '启用', value: '1' }
      ],
      channels: [
        { label: '告警短信', value: 'SMS' },
        { label: '站内信息', value: 'WEBSOCKET' },
        { label: '钉钉群机器人通知', value: 'DINGTALK' },
        { label: '告警邮件', value: 'MAIL' }
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(data) {
      if (data == null) data = this.data;
      this.getList();
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 查询数据
     */
    getList() {
      this.loading = true;
      confList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.rows;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    getChannels(channels) {
      if (channels == null) return '';
      let items = channels.split(',');
      let str = '';
      items.forEach((v) => {
        if (v != '') str += this.marchType(v, this.channels) + ', ';
      });
      return str;
    },

    /**
     * 获取站房列表
     */
    queryStationList(name) {
      listStation({ name: name }).then((res) => {
        if (res.code == 200) {
          this.stations = res.rows;
        }
      });
    },

    handleAdd() {
      let data = {
        channels: '',
        userGroups: ''
      };
      this.$emit('showRight', 'stationAlarmEdit', '新建配置', data);
    },
    handleInfo(row) {
      this.$emit('showRight', 'stationAlarmInfo', '配置详情', row);
    },
    handleEdit(row) {
      this.$emit('showRight', 'stationAlarmEdit', '编辑配置', row);
    },
    handleDel(row) {
      ElMessageBox.confirm('是否确认要删除该数据?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true;
          let ids = [row.configId];
          confDel(ids)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.getList();
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>
